<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 530px;
            /* height: 50px; */
            display: flex;
            /* align-items: center; */
        }

        textarea {
            height: 50px;
            width: 400px;
            transition: height 0.5s ease;
        }

        textarea:focus {
            height: 100px;
        }

        img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }

        button {
            height: 50px;
            width: 80px;
            color: white;
            margin-left: 10px;
            background-color: rgb(7, 89, 148);
            transition: height 0.5s ease;
        }

        .box:focus-within button {
            height: 100px;
        }

        span {
            color: gray;
            margin-left: 350px;
            opacity: 0;
        }

        .pin {
            width: 530px;
            /* opacity: 0; */
            display: none;
        }

        .name {
            color: rgb(231, 111, 131);
            font-size: 16px;
        }

        .text {
            font-size: 18px;
        }

        .time {
            color: gray;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="../images/img/3.webp" alt="">
        <textarea name="" id="" maxlength="200" placeholder="发一条友善的评论"></textarea>
        <button>发布</button>
    </div>
    <span>0/200字数</span>
    <div class="pin">
        <p class="name">吴彦祖</p>
        <p class="text">阿巴阿巴发顺丰撒发发发算法啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊嗷嗷啊啊啊啊啊啊按时发发发发发发发发发发发发发发发发发发发发发发发发反反复复发</p>
        <p class="time">2025-10-28 11:18</p>
    </div>
    <script>
        const inp = document.querySelector('textarea')
        const span = document.querySelector('span')
        const text = document.querySelector('.text')
        const pin = document.querySelector('.pin')
        inp.addEventListener('input', function () {
            span.innerHTML = `${inp.value.length}/200字`
        })
        inp.addEventListener('focus', function () {
            span.style.opacity = '1'
        })
        inp.addEventListener('blur', function () {
            span.style.opacity = '0'
        })
        inp.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                if (inp.value.trim()) {
                    pin.style.display = 'block'
                    text.innerHTML = inp.value
                }
                inp.value = ''
                span.innerHTML = '0/200字'
            }
        })
        // inp.addEventListener('blur', function () {
        //     pin.style.opacity = '0'
        // })

    </script>
</body>

</html>